<template>
  <div id="customer">
    <form method="post" action="#">
      <div class="condition-div">
        <el-input placeholder="客户号" class="def-input" v-model="searchCondition.customerId" clearable />
        <el-input placeholder="客户姓名" class="def-input" v-model="searchCondition.name" clearable />
        <el-input placeholder="身份证号" class="def-input" v-model="searchCondition.centNo" clearable />
        <span class="wealth-span">财富资产范围：</span>        
        <el-input placeholder="最小值" class="def-input wealth-input" v-model="searchCondition.wealthAssetAumMin" clearable />
        <span style="margin-left:5px;">-</span>
        <el-input placeholder="最大值" class="def-input wealth-input" v-model="searchCondition.wealthAsssetAumMax" clearable />
        <el-button type="primary" class="def-button" icon="el-icon-search" @click="search" >查询</el-button> 
        <el-button type="success" class="def_button" icon="el-icon-magic-stick" @click="goTestForm">表单校验学习</el-button>
      </div>      
    </form>

    <div class="customer-table-div">      
    <el-table :data="customerList" 
              class="def-table" 
              ref="customer-table"
              :height="tableHeight"
              border
              stripe
              show-summary
              :summary-method="getSummaries"
    >
      <el-table-column prop="customerId" label="客户编号" width="120" />
      <el-table-column prop="name" label="客户姓名" width="120" />
      <el-table-column prop="centNo" label="身份证号" width="200" />
      <el-table-column prop="sex" label="性别" width="60" />
      <el-table-column prop="managerOrgId" label="管户行编号" width="120" />
      <el-table-column prop="managerOrgName" label="管户行名称" width="200" />
      <el-table-column prop="managerId" label="管户经理工号" width="120" />
      <el-table-column prop="managerName" label="管户经理姓名" width="120" />
      <el-table-column prop="wealthAssetAum" label="客户财富资产" fit />
    </el-table>
    
    <el-pagination
      ref="customerTablePager"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 20, 30, 50]"
      :page-size="pageSize"
      :pager-count="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
      style="margin-top:10px"
    > 
		</el-pagination>   
    </div>
  </div>
</template>

<script>
import {NO_ERROR} from '../../constant.js'
import {tidyFormParamWithPage} from '../../util.js'

export default {
  name: 'Customer',
  data () {
    return {
      searchCondition: {
        customerId: '',
        name: '',
        centNo: '',
        wealthAssetAumMin: '',
        wealthAsssetAumMax: ''
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableHeight: 1,
      customerList: []
    }
  },  
  mounted () {
    this.calTableHeight()

    window.onresize = () => {
      this.calTableHeight()
    }    
  },
  destoryed () {
    window.onresize = null
  },
  updated () {
　　this.$nextTick(() => {
　　　　this.$refs['customer-table'].doLayout();
　　})
  },
  methods: {
    calTableHeight () {
      let screenHeight = document.documentElement.clientHeight ||
        document.body.clientHeight

      this.$nextTick(() => {
        this.tableHeight = screenHeight - 224
      })
    },
    search () {    
      let param = tidyFormParamWithPage(this.searchCondition, {
        page: this.currentPage,
        rows: this.pageSize
      })

      this.$axios.post("/my-customer", param)
    	.then(res => {
        if (res.data && res.data.code === NO_ERROR) {
          this.total = res.data.data.total
          this.customerList = res.data.data.rows
        }  		
    	})
    	.catch(console.log)
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.search()
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.search()
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if (index === columns.length - 1) {
          const values = data.map(item => Number(item[column.property]));
        
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);          
          }
        }        
      });

      return sums;
    },
    goTestForm () {
      this.$router.push('/frame/example/validate-form')
    }
  }  
}
</script>

<style lang="stylus" scoped>
#customer
  height 100%
  min-width max-content
  background-color #d6ecf0
  .condition-div
    white-space nowrap
    .def-input
      width 200px
      margin 20px 0 0 20px
    .wealth-span
      color #909399
      font-weight bold
      font-size 10pt
      margin 20px 0 0 20px
    .wealth-input
      width 85px
      margin-left 5px
    .def-button
      margin-top 20px
      margin-left 20px
  .customer-table-div
    padding: 20px      
    .def-table
      // background-color #d6ecf0
      margin 0
</style>
